<template>
  <div class="CarsSearch">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>车辆管理</el-breadcrumb-item>
      <el-breadcrumb-item><span class="fs14 bold">车辆查询管理</span></el-breadcrumb-item>
    </el-breadcrumb>

    <div class="common-operate-box">
      <el-form class="form-wrap flexMultiWrap" @keyup.enter.native.stop="enterHander">
        <FormWithLabel label="训练场">
          <FormInputWithDialog
            :val="inputDiolag.idList"
            v-bind="inputDiolag.innerSelect"
            @update:val="handleInp('id', $event)"
            @update:valText="handleInp('text', $event)"/>
        </FormWithLabel>
        <FormWithLabel label="车牌">
          <el-input v-model="tmpData.carPlate" placeholder="车牌"></el-input>
        </FormWithLabel>
        <FormWithLabel label="状态">
          <el-select v-model="tmpData.status" clearable>
            <el-option label="全部" :value="undefined"></el-option>
            <el-option label="有效" :value="1"></el-option>
            <el-option label="废弃" :value="0"></el-option>
          </el-select>
        </FormWithLabel>
      </el-form>

      <div class="btn-line flexCenter mt30">
        <button class="btn-operate btn-style-main mr10" @click="handleSearch">查询</button>
        <button class="btn-operate btn-style-tan" @click="resert">重置</button>
      </div>
    </div>

    <div class="common-operate-box">
      <el-table :max-height="this.tableMaxHeight()" :data="tableData" border>
        <el-table-column
          type="index" label="序号" width="50"
          header-align="center" align="center">
        </el-table-column>
        <el-table-column
          prop="plateNumber" label="车牌"
          header-align="center" align="center">
        </el-table-column>
        <el-table-column
          prop="drivingType" label="驾照车型"
          header-align="center" align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.drivingType === '1'">
              <span>c1</span>
            </template>
            <template v-else>
              <span>c2</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="carOwner" label="车主"
          header-align="center" align="center">
          <template slot-scope="scope">
            <div class="hiddenOverText" :title="scope.row.carOwner">{{scope.row.carOwner}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="brand" label="车牌品牌"
          header-align="center" align="center">
        </el-table-column>
        <el-table-column
          prop="model" label="车辆型号" height="200px"
          header-align="center" align="center">
          <template slot-scope="scope">
            <div class="hiddenOverText" :title="scope.row.model">{{scope.row.model}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="buyDate" label="购买日期" width="100"
          header-align="center" align="center">
          <template slot-scope="scope">
            {{formatDate(scope.row.buyDate, {outType: 'YMD'})}}
          </template>
        </el-table-column>
        <el-table-column
          prop="schoolName" label="驾校"
          header-align="center" align="center">
        </el-table-column>
        <el-table-column
          prop="groupIdName" label="训练场"
          header-align="center" align="center">
        </el-table-column>
        <el-table-column
          prop="statusTxt" label="状态"
          header-align="center" align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.status">
              <span>有效</span>
            </template>
            <template v-else>
              <span>废弃</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          v-if="hideRow" prop="id" label=""
          header-align="center" align="center">
        </el-table-column>
      </el-table>

      <el-pagination
        class="flexCenter mt30"
        background
        :current-page.sync="pageNum" :page-size.sync="pageSize" :total="totalPage"
        :page-sizes="[10, 30, 50, 100]" layout="prev, pager, next, sizes, jumper, total"
        @size-change="ajaxGetData" @current-change="ajaxGetData">
      </el-pagination>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import FormInputWithDialog from '@/components/FormInputWithDialog'

  import SearchPart from '@/mixins/SearchPart'
  import PagePart from '@/mixins/PagePart'

  export default {
    name: 'CarsSearch',
    components: {FormInputWithDialog},
    mixins: [SearchPart, PagePart],
    data () {
      return {
        tableData: [],
        tmpData: {
          carPlate: '',
          status: undefined
        },
        treeSchool: [],
        treeGroup: [],

        inputDiolag: {
          companysOrPersonals: '', // 文本
          idList: [], // id
          innerSelect: {
            placeholder: '请选择',
            ajaxObj: {
              url: '/api/org/search',
              params: {type: '9'}
            }
          }
        },
        pageNum: 0,
        pageSize: 10,
        totalPage: 0,
        hideRow: false
      }
    },
    async mounted () {
      await this.ajaxGetTree()
      this.ajaxGetData()
    },
    methods: {
      ajaxGetData () {
        let postData = {
          ...this.calcPageParams,
          params: {
            plateNumber: this.tmpData['carPlate'] + '', // 车牌号
            groupId: this.inputDiolag['idList'], // 训练场
            status: this.tmpData['status'] // 状态（1有效：0废弃）
          },
          sort: 'string'
        }
        this.$axios.post('/api/crmCar/list', postData)
          .then(res => {
            this.enterFlag = false // 回车功能设为true
            if (res.data.meta.success) {
              let resData = res.data.data
              this.totalPage = resData.totalSize
              this.tableData = resData.data.map(item => {
                return {
                  ...item,
                  schoolName: this.getTxtById('schoolId', item.schoolId),
                  groupIdName: this.getTxtById('groupId', item.groupId)
                }
              })
            }
          })
      },
      ajaxGetTree () {
        let p1 = this.$axios.post('/api/org/search', {type: '9'})
          .then(res => {
            let resData = res.data.data
            this.treeGroup = [resData] // 树形数据
          })
        let p2 = this.$axios.post('/api/org/search', {type: '7'})
          .then(res => {
            let resData = res.data.data
            this.treeSchool = [resData] // 树形数据
          })
        return Promise.all([p1, p2])
      },
      flat (tarData) {
        let key = 'subList'
        if (!tarData[key] || !tarData[key].length) return [tarData]

        let that = this
        let childList = tarData[key].reduce((list, child) => [...list, ...that.flat(child)], [])
        let res = [tarData, ...childList]
        return res
      },
      // 根据ID查找对应文本
      getTxtById (treeListType, id) {
        let treeList = treeListType === 'schoolId' ? this.treeSchool : this.treeGroup
        let rawFlatData = this.flat(this.deepCopy({subList: treeList}))
        let valText = [id].reduce((sumStr, key) => {
          let find = rawFlatData.find(item => item.id === key)
          if (find) {
            sumStr.push(find['name'])
          }
          return sumStr
        }, [])
        return valText.join(', ')
      },
      handleInp (type, newVal) {
        if (type === 'text') {
          this.$set(this.inputDiolag, 'companysOrPersonals', newVal)
        } else if (type === 'id') {
          this.$set(this.inputDiolag, 'idList', newVal)
        }
      },
      resert () {
        for (let value in this.tmpData) {
          this.tmpData[value] = ''
        }
        this.inputDiolag['idList'] = []
      }
    }
  }
</script>
<style scoped rel="stylesheet/scss" type="text/scss" lang="scss">
  .CarsSearch {
    .hiddenOverText {
      verflow: hidden;
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      max-height: 70px;
      line-height: 23px;
    }
  }
</style>
